<template>
  <div id="drawer">
    <div class="inner">
      <h4>数据库信息</h4>
    </div>
    <div class="node-label-wrap">
      <div class="title-wrap">
        <h5>节点标签</h5>
      </div>
      <div class="label-container">
        <el-button class="label-btn" round size="mini" v-for="(item, index) in nodeLabelList" @click="handleNodeClick(item)">
          {{item.label}}
        </el-button>
      </div>
    </div>

    <div>
      <div class="title-wrap">
        <h5>节点关系</h5>
      </div>

      <div class="label-container">
        <el-button class="label-btn" size="mini" v-for="(item, index) in relationList">{{item.name}}</el-button>
      </div>

    </div>

  </div>
</template>

<script>
import {$NodeApi} from "@/network/node/NodeApi";
import {$RelationApi} from "@/network/node/RelationApi";
import {EventBus} from "@/EventBus";
export default {
  name: "DBInfo",
  data() {
    return {
      nodeLabelList: [],
      relationList: [],
    }
  },
  methods: {
    async getNodeLabelList() {
      let res= await $NodeApi.listNode();
      let array = res.data;
      if (array) {
        this.nodeLabelList = array.map(item => ({id: item.id, label: item.label}))
      }
    },

    async getRelationList() {
      let res = await $RelationApi.listRelation();
      let data = res.data;
      if (data) {
        this.relationList = data.map(item => ({
          id: item.id,
          name: item.name,
          fromId: item.fromId,
          toId: item.toId
        }))
      }
    },

    handleNodeClick(item) {
      debugger
      let params = {
        id: item.id,
        label: item.label
      }
      EventBus.$emit("nodeClick", params);
    }
  },

  mounted() {
    this.getNodeLabelList();
    this.getRelationList();

    EventBus.$on("nodeSave", ({}) => {
      this.getNodeLabelList();
    });

    EventBus.$on("relationSave", ({}) => {
      this.getRelationList();
    });





  }
}
</script>

<style scoped>
 .inner {
   height: 56px;
   padding-left: 10px;
   background-color: #E9EEF3;
 }

 .inner h4 {
   font-size: 17px;
   line-height: 56px;
 }
 
 .title-wrap {
   padding-left: 10px;
   border-bottom: 1px solid #E9EEF3;
 }
 
 .title-wrap h5 {
   font-size: 13px;
 }

 .label-container {
   display: flex;
   flex-wrap: wrap;
   padding: 5px 10px;
   width: 300px;
   box-sizing: border-box;
 }

 .el-button {
   margin: 2px 0;
 }

 .label-btn {
   margin-right: 10px;
 }

</style>